<template>
	<view>
		<!-- 导航组 -->
		<view class="diy-navBar" :style="{background:  itemStyle.background }">
			<view :class="['data-list','avg-sm-'+ itemStyle.rowsNum]">
				<view class="item-nav" v-for="(dataItem,index) in dataList" :key="index">
					<view class="nav-to" @click="navigationTo" :data-url="dataItem.linkUrl">
						<view class="item-image">
							<image class="image" mode="widthFix" :src="dataItem.imgUrl"></image>
						</view>
						<view class="item-text f-28 onelist-hidden" :style="{color: dataItem.color }">
							{{ dataItem.text }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemIndex: String,
			itemStyle: Object,
			params: Object,
			dataList: Array
		},
		data() {
			return {

			};
		},
		methods: {
			/**
			 * 跳转到指定页面
			 */
			navigationTo: function(e) {

			},
		}
	}
</script>

<style scoped>
	/* 导航组 */

	.diy-navBar .data-list::after {
		clear: both;
		content: " ";
		display: table;
	}

	.diy-navBar .item-nav {
		float: left;
		margin: 10px 0;
		text-align: center;
	}

	.diy-navBar .item-nav .item-image {
		margin-bottom: 4px;
		font-size: 0;
	}

	.diy-navBar .item-nav .item-image .image {
		width: 88rpx;
		height: 88rpx;
	}

	/* 分列布局 */

	.diy-navBar .avg-sm-3>.item-nav {
		width: 33.33333333%;
	}

	.diy-navBar .avg-sm-4>.item-nav {
		width: 25%;
	}

	.diy-navBar .avg-sm-5>.item-nav {
		width: 20%;
	}
</style>
